<template>
    <h1>(管理员)用户理财项目列表</h1>

    理财编号：<input type="text" v-model="info.id">
    理财产品名称：<input type="text" v-model="info.Name">
    理财收益：<input type="text" v-model="info.MinMoney">-
    <input type="text" v-model="info.MaxMoney">
    <input type ="button" value="查询" @click="ShowData()">

<table class=" table table-border" border="1">
    <thead>
        <tr>
        <th><input type="checkbox"></th>
        <th>理财编号</th>
        <th>理财产品名称</th>
        <th>年收益</th>
        <th>月收益</th>
        <th>最低理财金额</th>
        <th>理财人数</th>
        <th>风险等级</th>
        <th>理财利息</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
        <tr v-for="item in Show">
            <td><input type="checkbox"></td>
            <td>{{ item.F_Id }}</td>
            <td>{{ item.F_Name }}</td>
            <td>{{ item.F_APY }}CNY</td>
            <td>{{ (item.F_MinMoney*item.F_APY/12).toFixed(2)}}CNY</td>  
            <td>{{ item.F_MinMoney }}CNY</td>
            <td>{{ item.F_Number }}</td>
            <td>{{ item.F_Level==0?"低风险":item.F_Level==1?"中风险":"高风险" }}</td>
            <td>{{ item.T_Interesting}}%</td>
            <td>
                <a href="#" @click="jump(item.F_Id)" >用户购买明细</a>
            </td>
        </tr>
    </tbody>

</table>
    <span>
    共{{ FaYeInfo.PageCount }}条数据,每页{{ FaYeInfo.PageSize }}条,
    当前第{{ FaYeInfo.PageIndex }}/{{ FaYeInfo.totalCount }}页

</span>

</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();

//用于显示的响应式数据
const Show = ref([{
    F_Id:0,
    F_Name:'',
    F_APY:0,
    F_MinMoney:0,
    F_Number:0,
    F_Level:0,
    T_Id:0,
    T_Year:'',
    T_Interesting:0
}])

//用于查询的响应式数据
const info = ref({
    id:'',
    Name:'',
    MinMoney:'',
    MaxMoney:'',
})

const FaYeInfo = ref({
    PageSize:5,//每页显示条数
    PageIndex:1,//当前页数
    PageCount:0,//总条数
    totalCount:0//总页数
})

onMounted(()=>{
    ShowData();
})

//显示 所有数据
const ShowData = ()=>{
    axios({
        url:'http://localhost:53279/api/Financing/ShowFinan',
        method:'get',
        params:{
            id:info.value.id,
            Name:info.value.Name,
            MinMoney:info.value.MinMoney,
            MaxMoney:info.value.MaxMoney,
            PageSize:FaYeInfo.value.PageSize,
            PageIndex:FaYeInfo.value.PageIndex
        }
    })
    .then(function (res){
        console.log(res.data);
        Show.value = res.data.Flist;
        FaYeInfo.value.PageCount = res.data.PageCount;
        FaYeInfo.value.totalCount = res.data.totalCount;
    })
    .catch(function (err){
        console.log(err);  
    })
}

const jump = (F_Id:number)=>{
    router.push({
        name:'ShowStaffFinan',
        params:{
            F_Id:F_Id
        }
    })
}


</script>